<template>
    <div>
        <Row class="menu-header">
            <Col span="5" style="text-align: left;">
                <img class="index-icon" src="../../assets/index/i-icon2.png">
                <span class="index-title"><strong>热门文档</strong></span>
                <span class="index-desc">/ Hot Document</span>
            </Col>
            <Col span="16" offset="3">
                <Row type="flex" justify="center">
                    <Col span="22">

                    </Col>
                    <Col span="2">
                        <Button type="text">查看更多></Button>
                    </Col>
                </Row>

            </Col>
        </Row>
        <Row type="flex" justify="center" style="margin: 20px 0 0 0">
            <Col v-for="i in hotDocs" :key="i.id" span="4" class="hotDoc">

                <el-card :body-style="{ padding: '0px' }" class="h-content" shadow="hover">
                    <div :style="{background:'url(' + i.pic + ') no-repeat'}" class="doc-img">
                        <div class="doc-title">
                            {{i.title}}
                        </div>
                    </div>
                    <Row class="content-desc">
                        <div class="content-title">
                            {{i.title}}
                        </div>
                    </Row>
                    <Row class="content-desc">
                        <div class="content-seller">
                            销量：{{i.sellerVolume}}
                        </div>
                    </Row>
                    <Row class="content-desc">
                        <div class="content-seller content-price">
                            <span style="color: red"><strong>￥{{i.newPrice}} &nbsp; </strong></span>
                            <span style="text-decoration:line-through"
                                  v-if="i.oldPrice != undefined"> ￥{{i.oldPrice}}</span>
                        </div>
                    </Row>

                </el-card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "hotDocument",
        data() {
            return {
                hotDocs: [
                    {
                        id: 1,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 1,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc01.jpg"),
                        sellerVolume: 10023
                    },
                    {
                        id: 2,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 2,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc02.jpg"),
                        sellerVolume: 10023
                    },
                    {
                        id: 3,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 5.5,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc03.jpg"),
                        sellerVolume: 10023
                    },
                    {
                        id: 4,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 8,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc04.jpg"),
                        sellerVolume: 10023
                    },
                    {
                        id: 5,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 6,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc05.jpg"),
                        sellerVolume: 10023
                    },
                    {
                        id: 6,
                        title: "漂亮的多层彩色立体金字塔",
                        newPrice: 3,
                        sellerId: 12,
                        sellerName: "谢广坤",
                        pic: require("../../assets/hotDocs/doc06.jpg"),
                        sellerVolume: 10023
                    },
                ]
            }
        }
    }
</script>

<style scoped>
    .hotDoc {
        padding: 0.4%;
    }

    .content-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        text-align: left;
        padding: 2px 0 0 3px;
    }
    .content-price{
        padding-bottom: 10px;
    }
    .doc-img{
        width: 100%;
        height: 8rem;
        overflow:hidden;

    }
    .doc-img:hover{
        transform: scale(1.03);
    }
    .doc-title{
        text-align: left;
        overflow: hidden;
        font-size: 20px;
        color: white;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 3rem;
        padding-left: 2%;
    }

</style>